import React, { memo, useEffect, useRef, useState } from 'react';

import { EarthIcon, MenuIcon, UserIcon } from '@/components/common/icon';

const ComponentName = memo(() => {
  let [isShowLogin, setisShowLogin] = useState<boolean>(false);
  let popRef = useRef(null);

  let showLogin = (show: boolean) => {
    setisShowLogin(show);
  };
  let handleOutsideClick = (event: MouseEvent) => {
    setisShowLogin(false);
  };

  useEffect(() => {
    // 根据 登录页状态关闭监听
    //true:在捕获阶段 处理函数
    document.addEventListener('click', handleOutsideClick, true);

    return () => {
      //处理副作用
      //   console.log('处理副作用');

      document.removeEventListener('click', handleOutsideClick, true);
    };
  }, [isShowLogin]);

  return (
    <div className="flex-1 text-right flex justify-end items-center gap-2 relative">
      <div className=" hover:bg-purple-50 p-4 rounded-[50%] cursor-pointer">
        <EarthIcon></EarthIcon>
      </div>

      <div
        ref={popRef}
        id="popup"
        onClick={() => showLogin(true)}
        className="p-2 rounded-[25px] flex items-center gap-2 border-[1px] h-[48px] px-4 cursor-pointer hover-shadow"
      >
        <MenuIcon></MenuIcon>

        <UserIcon></UserIcon>
      </div>

      {isShowLogin && (
        <div className="cursor-pointer rounded-md absolute  w-[200px] border-[1px] bg-white right-0  bottom-[-157px] py-2 shadow-sm ">
          <p className="hover:bg-gray-100 px-2 text-left py-2 text-[14px]">注册</p>
          <p className="hover:bg-gray-100 px-2 text-left py-2 text-[14px]">登录</p>
          <p className="hover:bg-gray-100 px-2 text-left py-2 text-[14px]">帮助中心</p>
        </div>
      )}
    </div>
  );
});

export default ComponentName;
